import styled from 'styled-components'

export const ProgressBarContainer = styled.div`
  position: relative;
  width: 20%;
  height: 0.6rem;
  border-radius: 2rem;

  &::before {
    position: absolute;
    background: #b6cbea;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    width: calc(100% + 2px);
    content: "";
    border-radius: inherit;
  }
`
//这种写法会频繁替换dom元素
// const FinishBar = styled.div`
//   position: absolute;
//   background: #ccff7a;
//   height: 100%;
//   width: ${props => props.progress*100%100}%;
//   content: "";
//   border-radius: inherit;
// `

//这种写法频繁修改style值
export const FinishBar = styled.div.attrs(props=>({
    style:{
        width: Math.floor(props.progress*100)+"%" || 0
    }
}))`
  position: absolute;
  background: #e48085;
  height: 50%;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  border-radius: inherit;
`
export const Slider = styled.div.attrs(props=>({
    style:{
        // transform:{
        //     translateY:props.progress+"%"
        // }
        // transform:'translateX:${props.progress}%',
        left:Math.floor(props.progress*100)+"%" || 0
    }
}))`
  position: absolute;
  background: rgb(255, 60, 60);
  height: 1rem;
  width: 1rem;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0.5px #ffb000 solid;
  border-radius: 50%;
  content: "";
`